<template>
	<view class="container">
		<cu-custom isBack title="监控列表" />

		<searchFilter @select="selectHandle"></searchFilter>

		<view class="list">
			<view class="location">
				<view class="line-title">太阳城检测点</view>
				<image src="/static/images/watch/p.png" class="pIcon"></image>
			</view>

			<navigator
				url="/pages/watch/watchDetail"
				class="imageItem"
				v-for="(item, index) in 5"
				:key="index"
			>
				<view class="imageItem-imgBox">
					<image
						src="/static/images/watch/play.png"
						class="imageItem-playIcon"
					></image>
					<image src="" class="imageItem-img"></image>
				</view>
				<view class="imageItem-name">01 一脱区监控视频</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import searchFilter from '@/components/searchFilter/searchFilter.vue';
export default {
	components: {
		searchFilter
	},
	data() {
		return {};
	},
	methods: {
		selectHandle(e) {
			console.log(e);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f7f7f7;
	padding: 24rpx 0 120rpx;

	.list {
		margin: 24rpx 24rpx 0;
		padding: 32rpx 24rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		.location {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.pIcon {
				width: 32rpx;
				height: 32rpx;
			}
			margin-bottom: 28rpx;
		}
		.line-title {
			display: flex;
			align-items: center;

			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			&::before {
				content: '';
				display: block;
				width: 4rpx;
				height: 36rpx;
				background: #60c6fd;
				border-radius: 2rpx;
				margin-right: 20rpx;
			}
		}
		.imageItem {
			margin-bottom: 36rpx;
			&-imgBox {
				position: relative;
			}
			&-playIcon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 88rpx;
				height: 88rpx;
			}
			&-img {
				width: 100%;
				height: 360rpx;
				background-color: #999999;
				border-radius: 10rpx;
			}
			&-name {
				text-align: center;
				margin-top: 18rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
	}
}
</style>
